<template>
  <el-tooltip :content="$t('navbar.message')">
    <el-popover placement="bottom" trigger="click">
      <div class="message">
        <div class="message-header">通知</div>
        <ul class="message-list">
          <li v-for="(item, index) in messages" :key="index">
            <p class="message-body">{{ item.body }}</p>
            <p class="message-footer">
              <span class="message-type">{{ item.type }}</span>
              <span class="message-time">{{ item.time }}</span>
            </p>
          </li>
        </ul>
      </div>

      <div slot="reference" class="tools-item">
        <span><i class="el-icon-message"></i></span>
      </div>
    </el-popover>
  </el-tooltip>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      messages: [
        {
          body: "腾讯大厦一楼改造施工项目 已通过审核！",
          type: "合同动态",
          time: "2021-01-01 8:00",
        },
        {
          body: "三季度生产原材料采购项目 开票成功！",
          type: "票务动态",
          time: "2021-01-01 8:00",
        },
        {
          body: "2021-01-01 10:00的【国家电网线下签约】会议即将开始，请提前10分钟前往 会议室1 进行签到！",
          type: "会议通知",
          time: "2021-01-01 8:00",
        },
        {
          body: "一季度生产原材料采购项目 开票成功！",
          type: "票务动态",
          time: "2021-01-01 8:00",
        },
        {
          body: "一季度生产原材料采购项目 开票成功！",
          type: "票务动态",
          time: "2021-01-01 8:00",
        },
        {
          body: "一季度生产原材料采购项目 开票成功！",
          type: "票务动态",
          time: "2021-01-01 8:00",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.message {
  width: 400px;
  height: 450px;

  .message-header {
    text-align: center;
    font-size: 16px;
    line-height: 3rem;
    border-bottom: 1px solid #dddfe5;
  }

  ul.message-list {
    margin: 0;
    padding: 0;
    height: calc(100% - 48px);
    overflow: auto;

    li {
      list-style: none;
      padding: 0 24px;
      border-bottom: 1px solid #dddfe5;

      .message-footer {
        color: $--color-text-secondary;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
